<template>
    <div class="danger-modal" :class="{ 'show' : isShow  }">
        <div class="modal_container">
            <div class="modal_content">
            
                <img src="@/assets/img/icon/icon-err.png" class="icon mb_20" 
                alt="icon"  />
                
                <h1 class="mb_20">检验结果异常!请等待复检结果!</h1>

                <button class="btn btn_danger mb_20" @click="closeModal(0)">
                     确认
                </button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue,
        Watch
    } from 'vue-property-decorator';

    @Component


    export default class Cancel extends Vue {
        @Prop({
            type: Boolean, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: '' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数 
        }) toDangerBlock!: Boolean;

        isShow = false;

        @Watch('dangerBlock')
        ontoDangerBlockChanged(val: boolean, oldVal: boolean) {
            this.isShow = val;
            
        }

        created() {
           
        }

        closeModal() {
           
            this.isShow = false;
            
        }
    }
</script>


<style lang="scss" scoped>
    .danger-modal {
        @include modal_bg;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: $modal_index;
        display: none;

        .modal_container {
            height: 250px;
            width: 40%;
            border: 3px solid $danger_color;
            border-radius: 0;
            @include box_shadow;
            padding: 0.2rem;
            .modal_title {
                text-align: center;
                padding: 12px;
                h3 {
                    color: #999;
                }
            }

            .modal_content {
                padding: 0 12px;
                
                img{
                    width:100px;
                }
                textarea{
                    margin-top: 20px;
                    height: 230px;
                    width: 100%;
                    margin: auto;
                    font-size:0.16rem;
                    border: 1px solid #999;
                }
            }

            .modal_close,.modal_right {
                img {
                    width: 45px;
                    position: absolute;
                    right: -18px;
                    top: -18px;
                }
            }
            .modal_right{
                img{
                    left: -18px;
                }
            }
        }
    }
</style>